<!--

-->

<template>
    <div class="tabs">
        <div class="left button" @click="scrollLeft">
            <b-icon name="bi-chevron-left" size="14"/>
        </div>
        <div class="center">
            <g-tabs ref="gtabs" :value="current.componentName" :list="list">
                <template #tab="{ item, selected }">
                    <div @click="onTabClick(item.componentName)" @dblclick="onTabDblclick(item)" class="tab-item" :class="selected ? 'selected' : ''">
                        <b-icon v-if="item.componentName === current.componentName" @click="onRefreshClick" name="bi-arrow-clockwise" size="16"/>
                        <span style="padding: 0 6px">{{ item.query.titleName }}</span>
                        <!--工作台不允许关闭-->
                        <b-icon v-if="item.query.page !== '/workbenches'" name="bi-x-lg" size="14" @click.stop="onClose(item.componentName)" style="color: #c2c2c2"/>
                    </div>
                </template>
            </g-tabs>
        </div>
        <div class="right button" @click="scrollRight">
            <b-icon name="bi-chevron-right" size="14"/>
        </div>
        <el-dropdown>
            <div class="right-down button">
                <b-icon name="bi-chevron-down" size="14"/>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="closeLeft" style="padding-right: 20px;">
                        <b-icon name="bi-arrow-left-short"/>
                        <span>关闭左侧</span>
                    </el-dropdown-item>
                    <el-dropdown-item @click="closeRight" style="padding-right: 20px;">
                        <b-icon name="bi-arrow-right-short"/>
                        <span>关闭右侧</span>
                    </el-dropdown-item>
                    <el-dropdown-item @click="closeOther" style="padding-right: 20px;">
                        <b-icon name="bi-x"/>
                        <span>关闭其他</span>
                    </el-dropdown-item>
                    <el-dropdown-item @click="closeAll" style="padding-right: 20px;">
                        <div style="display: inline-flex;width: 3px;"></div>
                        <b-icon name="bi-x-circle" size="14"/>
                        <span>关闭全部</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import {ref, reactive, computed, watch, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter, useRoute} from "vue-router";

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// 当前路由
const route = useRoute();
// store
const store = useStore();

// 已经打开的页面 整个组件对象，包含路由源信息
const list = computed(() => store.getters.openedPages.map(item => {
    item.value = item.componentName;
    return item;
}));
// 当前页面组件名
const activePageComponentName = computed(() => store.getters.activePageComponentName);
// 当前页面
const current = computed(() => {
    return list.value.find(item => item.componentName === activePageComponentName.value) || {};
})
const gtabs = ref("gtabs");
const onClose = (componentName) => {
    store.dispatch("closePage", componentName);
};
const onTabClick = (componentName) => {
    const item = list.value.find((item) => item.componentName === componentName);
    router.push(item.sourceRoute.fullPath)
};
const onRefreshClick = () => {
    store.dispatch("isReloading");
};
const closeLeft = () => {
    store.dispatch("closeLeft");
};
const closeRight = () => {
    store.dispatch("closeRight");
};
const closeOther = () => {
    store.dispatch("closeOther");
};
const closeAll = () => {
    store.dispatch("closeAll");
};
const scrollLeft = () => {
    gtabs.value.scrollToLeft();
};
const scrollRight = () => {
    gtabs.value.scrollToRight();
};
const onTabDblclick = (item) => {
    console.log("双击", item)
}

onMounted(() => {
})
</script>


<style scoped lang="scss">

// tabs 标签页
.tabs {
    width: 100%;
    height: 40px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
    z-index: 500;

    &::after {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: whitesmoke;
    }

    .button {
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color: #333;

        &:hover {
            color: var(--el-menu-active-color);
        }
    }

    .left {
        border-right: 1px solid whitesmoke;
    }

    .center {
        width: calc(100% - 120px);
    }

    .right {
        border-left: 1px solid whitesmoke;
    }

    .right-down {
        border-left: 1px solid whitesmoke;
    }

    .tab-item {
        padding: 0 10px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-wrap: nowrap;
        white-space: nowrap;
        height: 40px;
        font-size: 13px;
        color: #747579;

        &::before {
            content: " ";
            position: absolute;
            left: 0;
            width: 0;
            bottom: 0;
            height: 2px;
            background: var(--el-menu-active-color);
            z-index: 1;
            //transition: all 0.3s ease;
        }

        &::after {
            content: " ";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 1px;
            background: whitesmoke;
        }
    }

    .selected {
        color: var(--el-menu-active-color);

        &::before {
            content: " ";
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 0;
            height: 2px;
            background: var(--el-menu-active-color);
            z-index: 1;
        }
    }
}
</style>
